<!-- 发表评价 -->
<template>
	<view class="page">
		<view class="score-content">
			<image class="img" src="/pagesC-order/static/images/will-delete/goods1.png" mode="aspectFill"></image>
			<text class="label">综合评分</text>
			<text class="star iconfont" v-for="(value, index) in 5" :key="value"
				:class="{'active': formData.score > index}" @click="handleChangeStar(index + 1)">
				{{formData.score > index ? '&#xe618;': '&#xe61d;'}}
			</text>
			<view class="score-text">{{dist[formData.score]}}</view>
		</view>
		<textarea class="comment" v-model="formData.comment" placeholder="说说对商品的想法和使用感受吧" />
		<view class="pictures">
			<view class="upload-item">
				<view class="pic-box" v-for="item in filePaths" :key="item.id">
					<image class="pic" :src="item.path" mode="aspectFill">
					</image>
					<button @click="handleRemovePic(item.id)" class="close-btn iconfont">&#xe603;</button>
				</view>
				<!-- 选择图片按钮 -->
				<button @click="handleChooseImage()"
					class="upload-btn iconfont btn-transition-scale95">&#xe617;</button>
			</view>
		</view>

		<button class="submit-btn" @click="handleSubmit()">提交评价</button>

		<view class="anonymity" @click="formData.anonymity = !formData.anonymity">
			<text class="checkbox iconfont" :class="{'active': formData.anonymity}">{{formData.anonymity ? '&#xe62c;': '&#xe6a6;'}}</text>
			<text class="label">匿名评价</text>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';

	const formData = ref({
		id: "",
		score: 5,
		comment: '',
		anonymity: 0,
	});

	const dist = ref({
		0: '',
		1: '差',
		2: '较差',
		3: '一般',
		4: '好',
		5: '很好'
	});
	
	const filePaths = ref([]);

	// 选择评分
	const handleChangeStar = (score) => {
		formData.value.score = score;
	}
	
	// 选择图片上传
	const handleChooseImage = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['camera', 'album'], //从相册选择
			success: async (res) => {
				// uni.showLoading({ title: '上传中...' });
				// const result = await api.c_need_api.upload({
				// 	filePath: res.tempFilePaths[0],
				// }).finally(() => setTimeout(uni.hideLoading, 100));
	
				// filePaths.value.push(result.data.data);
				filePaths.value.push({path: res.tempFilePaths[0], id: Date.now()})
			}
		})
	}
	
	// 移除图片
	const handleRemovePic = (id) => {
		const index = filePaths.value.findIndex(item => item.id === id);
		filePaths.value.splice(index, 1);
		// formData.value.photo = filePaths.value.map(item => item.id).join();
	}

	// 提交数据
	const handleSubmit = async () => {
		if (!formData.value.score) {
			return uni.showNoneToast('请选择评分');
		}
		if (!formData.value.comment) {
			return uni.showNoneToast('请输入评价内容');
		}

		uni.showSuccessToast('感谢评价', () => {
			uni.navigateBack();
		});
	}
</script>

<style lang="scss" scoped>
	$redColor: #FE3333;

	.score-content {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background-color: white;

		.img {
			width: 70rpx;
			height: 70rpx;
		}

		.label {
			font-size: 26rpx;
			color: #333;
			margin-left: 20rpx;
		}

		.star {
			font-size: 36rpx;
			color: #888;
			margin-left: 20rpx;

			&.active {
				color: $redColor;
			}
		}

		.score-text {
			font-size: 26rpx;
			color: #888;
			margin-left: 40rpx;
		}
	}

	.comment {
		background-color: white;
		border-top: 2rpx solid #fafafa;
		font-size: 28rpx;
		padding: 20rpx 30rpx;
		width: 100%;
		height: 260rpx;
		box-sizing: border-box;
	}
	
	.pictures {
		background-color: white;
		padding-left: 30rpx;
	
		.upload-item {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 38rpx;
			margin-left: -30rpx;
			overflow: hidden;
	
			.pic-box {
				position: relative;
				width: 136rpx;
				height: 136rpx;
				margin-top: 25rpx;
				margin-left: 30rpx;
	
				.pic {
					width: inherit;
					height: inherit;
					border-radius: 10rpx;
				}
	
				.close-btn {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					font-size: 40rpx;
					color: #D9D9D9;
					border-radius: 50%;
					background: radial-gradient(#999999 50%, transparent 50%);
				}
			}
	
			.upload-btn {
				width: 136rpx;
				height: 136rpx;
				font-size: 60rpx;
				color: #60646F;
				text-align: center;
				line-height: 136rpx;
				border-radius: 10rpx;
				background-color: #F5F4F5;
				margin-top: 25rpx;
				margin-left: 30rpx;
			}
		}
	}

	.submit-btn {
		height: 80rpx;
		font-size: 30rpx;
		color: white;
		background-color: $redColor;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		margin: 30rpx;
		transition: transform 0.2s;

		&:active {
			transform: scale(0.95);
		}
	}

	.anonymity {
		padding: 0 30rpx;

		.checkbox {
			font-size: 34rpx;
			color: #aaa;

			&.active {
				color: $redColor;
			}
		}

		.label {
			font-size: 28rpx;
			color: #aaa;
			margin-left: 14rpx;
		}
	}
</style>